今日目標說明

今天我們要在前端用 axios 發送帳號密碼到後端，取得 JWT Token 後，將其存在瀏覽器的 localStorage 中。更重要的是，我們會設定 Axios 的「攔截器 (Interceptor)」，讓以後前端發送的每一個 API 請求，都會自動在 Headers 帶上這張通行證！

【技術原理解析】為什麼要用 Interceptor (攔截器)？

身為工程師，我們必須遵守 DRY (Don't Repeat Yourself) 原則。
如果沒有攔截器，您在寫撈圖鑑、新增寶可夢、刪除寶可夢的 API 時，每一支都要手寫這段扣：
axios.get('/api/holdings', { headers: { Authorization: 'Bearer ' + token } })。
如果哪天後端要求改 Header 名稱，您全站上百支 API 都要改。

透過 Interceptor，我們等於是在前端與後端的橋樑上設了一個「自動收費站」。不管您是發哪支 API，它都會在飛出瀏覽器前被攔截下來，自動幫您塞好 Token 再放行。超級優雅！

核心程式碼片段

我們建立一支 src/api/client.ts 負責所有對外的連線：

import axios from 'axios';

// 建立 axios 實體
const api = axios.create({
  baseURL: 'http://localhost:3000/api',
  timeout: 10000,
});

// 請求攔截器 (Request Interceptor) - 飛出前端前觸發
api.interceptors.request.use((config) => {
  const token = localStorage.getItem('token');
  // 如果 localStorage 有 token，就自動放進 headers 裡
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

// 回應攔截器 (Response Interceptor) - 收到後端回傳前觸發
api.interceptors.response.use(
  (response) => response,
  (error) => {
    // 如果後端回應 401 Unauthorized，代表 Token 過期或無效
    if (error.response?.status === 401) {
      localStorage.removeItem('token');
      window.location.href = '/login'; // 強制踢回登入頁
    }
    return Promise.reject(error);
  }
);

export default api;

實際畫面截圖

在瀏覽器的開發者工具 (F12) -> Application -> Local Storage 中，確認成功登入後，token 確實被存進去了的畫面。

小結

Axios 攔截器是前端串接 API 的超級神隊友，設定一次，終身受用！明天，我們要介紹另一個處理資料的神器：React Query。